<template>
  <div>
    <van-nav-bar
      title="我的资料"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"/>
    <div class="content">
      <van-cell-group class="cell-group">
        <van-field
          :disabled="true"
          required
          label="手机号码"
          v-model="userInfoCache.mobile"
          @blur="onBlur('mobile')"
        />
        <van-field
          label="用户昵称"
          required
          v-model="userInfoCache.nickname"
          @blur="onBlur('nickname')"
        />
        <van-field
          label="电子邮箱"
          required
          v-model="userInfoCache.email"
          @blur="onBlur('email')"
        />
        <van-field
          label="个人介绍"
          type="textarea"
          required
          v-model="userInfoCache.words"
          @blur="onBlur('words')"
        />
      </van-cell-group>
      <van-cell-group class="cell-group">
        <van-cell class="form-avatar" required :class="{'has-avatar': userInfoCache.avatar}" title="用户头像" is-link>
          <template>
            <van-uploader class="touch-area" :after-read="onRead">
              <template v-if="!userInfoCache.avatar">
                <span>+</span>
              </template>
              <img class="avatar" v-else :src="userInfoCache.avatar" />
            </van-uploader>
          </template>
        </van-cell>
        <!-- <van-cell title="背景图" value="无" is-link/> -->
        <!-- <van-cell title="个人简介" :value="userInfo.gender==1?'男':'女'"/> -->
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Field, Toast, Uploader } from 'vant'
import API from '../../../api'
import * as qiniu from 'qiniu-js'

Vue.use(NavBar)
  .use(Field)
  .use(Uploader)

export default {
  data() {
    return {
      userInfo: {},
      userInfoCache: {},
      pickList: [],
      token: ''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onBlur(key) {
      if (
        this.userInfoCache[key] &&
        this.userInfo[key] !== this.userInfoCache[key]
      ) {
        API
          .updateUserInfo({
            [key]: this.userInfoCache[key]
          })
          .then(res => {
            if (+res.errCode === 0) {
              if (key === 'nickname') {
                Toast('修改昵称成功')
              }
            }
          })
      }
    },
    onRead(file) {
      this.pickList[0] = file
      this.uploadImg(this.pickList.length - 1, file.file)
    },
    doGet7nToken() {
      API.get7nToken().then(res => {
        this.token = res.data.token
      })
    },
    uploadImg(index, file, callback) {
      const vm = this
      const observable = qiniu.upload(file, file.name, this.token, {}, {})
      observable.subscribe({
        next(res) {
          vm.pickList[index]['percent'] = res.total.percent
          vm.pickList = [].concat(vm.pickList)
        },
        error(error) {
          Toast(error)
        },
        complete(res) {
          console.log(res)
          vm.pickList[index]['url'] = `//c1.airtlab.com/${res.key}`
          vm.pickList = [].concat(vm.pickList)
          vm.userInfoCache.avatar = vm.pickList[index]['url']
          vm.onBlur('avatar')
        }
      })
    },
    doCreateProduct() {
      let imgs = this.pickList.map(element => element.url)
      imgs = JSON.stringify(imgs)
      const params = Object.assign(
        {
          imgs
        },
        this.form
      )
      API.createXzProduct(params).then(res => {
        Toast('上传成功')
      })
    },
    doGetUserInfo() {
      API.getUserInfo().then(res => {
        this.userInfo = res.data
        this.userInfoCache = {
          ...res.data
        }
      })
    }
  },
  mounted() {
    this.doGetUserInfo()
    this.doGet7nToken()
  }
}
</script>

<style lang="less" scoped>
.touch-area {
  width: 40px;
  /deep/ .van-uploader__input-wrapper {
    flex: 1;
  }
}

.cell-group {
  margin-bottom: 10px;
}

.form-avatar  {
  align-items: center;
}

.has-avatar {
  .touch-area {
    width: 80px;
  }
}

.avatar {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
}
</style>
